<template>
  <page-view class="page-view" :title="false">
    <div slot="headerContent">
      <a-breadcrumb class="s-breadcrumb">
        <a-breadcrumb-item><nuxt-link to="/meal/manage">餐券管理</nuxt-link></a-breadcrumb-item>
        <a-breadcrumb-item>换餐记录</a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <a-card class="s-card">
      <a-spin :spinning="sending">

        <div class="filter">
          <a-form>
            <a-row>
              <a-col :lg="7" :md="12" :sm="24">
                <a-form-item label="发起人:" v-bind="formItemLayout">
                  <a-input v-model="queryParam.createdByName" placeholder="全部" />
                </a-form-item>
              </a-col>
              <a-col :lg="7" :md="12" :sm="24">
                <a-form-item label="换餐日期:" v-bind="formItemLayout">
                  <a-range-picker v-model="rangeDate" allow-clear @change="onChange" />
                </a-form-item>
              </a-col>
              <a-col :lg="7" :md="12" :sm="24">
                <a-form-item label="换餐餐券:" v-bind="formItemLayout">
                  <a-select v-model="queryParam.typeId" placeholder="全部">
                    <a-select-option v-for="item in mealType" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :lg="3" :md="12" :sm="24" style="white-space: nowrap;">
                <div class="btn-container">
                  <a-button type="primary" @click="handlePage()">查询</a-button>
                  <a-button @click="reset">重置</a-button>
                </div>
              </a-col>
            </a-row>
          </a-form>
        </div>

        <div>
          <s-table
            ref="changeTable"
            bordered
            class="s-table"
            row-key="id"
            :locale="{ emptyText: '无符合筛选条件的筛选项，请重新筛选！' }"
            :show-pagination="false"
            :columns="columns"
            :data="loadData"
            :alert="false"
          >
            <template slot="action" slot-scope="item">
              <div class="action-container">
                <span class="success-link" @click="checkDetail(item)">详情</span>
              </div>
            </template>
          </s-table>
          <!-- 分页器 -->
          <div class="pagination-container">
            <a-pagination
              :page-size="queryParam.pageSize"
              :show-total="total => `共 ${total} 条记录 第 ${queryParam.pageNum} / ${Math.ceil(total / queryParam.pageSize)} 页`"
              :current="queryParam.pageNum"
              :total="count"
              show-quick-jumper
              hide-on-single-page
              @change="handlePage"
            />
          </div>
        </div>

        <a-modal
          v-if="detailInfo"
          class="detail-modal"
          title="换餐详情"
          :footer="null"
          :visible="showDetail"
          mask-closable
          @cancel="showDetail=false"
        >
          <div class="item">通知标题: <span>{{ detailInfo.msgTitle }}</span></div>
          <div class="item">正文:<p>{{ detailInfo.msgContent }}</p></div>
          <div class="item">发起人:<span>{{ detailInfo.createdByName }}</span></div>
          <div class="item">发起日期:<span>{{ detailInfo.scheduleDates ? $moment(detailInfo.scheduleDates).format('YYYY年MM月DD日') : '未知' }}</span></div>
          <div>换餐详情:</div>
          <a-table
            bordered
            class="s-table"
            :columns="mealColumns"
            :data-source="records"
            :locale="{ emptyText: '暂无数据' }"
            :pagination="false"
            row-key="id"
          />
        </a-modal>

      </a-spin>
    </a-card>

  </page-view>
</template>

<script>
import { PageView, STable } from '@/components'
import { mapState } from 'vuex'

export default {
  name: 'Change',
  components: { PageView, STable },
  inject: ['formItemLayout'],

  data () {
    return {
      sending: false,
      rangeDate: [],

      showDetail: false,
      detailInfo: {},
      mealColumns: [
        { title: '换餐日期', align: 'center', dataIndex: 'scheduleDate' },
        { title: '换餐时间', align: 'center', dataIndex: 'name' },
        { title: '餐券状态', align: 'center', dataIndex: 'status' }
      ],
      records: [],

      queryParam: {
        createdByName: '',
        typeId: undefined,
        minScheduleDate: '',
        maxScheduleDate: '',
        pageSize: 10,
        pageNum: 1
      },
      count: 0,
      // 表头
      columns: [
        { title: '通知标题', width: '20%', align: 'center', dataIndex: 'msgTitle' },
        { title: '通知正文', width: '30%', align: 'center', dataIndex: 'msgContent' },
        { title: '换餐日期', width: '20%', align: 'center', dataIndex: 'date' },
        { title: '换餐餐券', align: 'center', dataIndex: 'typeNames' },
        { title: '发起人', align: 'center', dataIndex: 'createdByName' },
        { title: '操作', align: 'center', scopedSlots: { customRender: 'action' }}
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        const queryParam = this.queryParam
        const params = {}
        for (const key in queryParam) {
          const item = queryParam[key]
          if (item) params[key] = item
        }

        const that = this
        const { $moment, $notification } = this

        return this.$axios.post('api/mealChange/queryMsg', params).then(res => {
          if (res.data.code === '000000') {
            that.count = res.data.data.count // 设置总数
            const data = res.data.data.dataList.map(item => {
              item.date = item.scheduleDate || item.scheduleDates
              item.date = item.date ? $moment(item.date).format('YYYY.MM.DD') : '/'
              return item
            })
            return { data }
          }
        }).catch(e => $notification.error({ message: '连接服务器超时' }))
      }
    }
  },

  computed: {
    ...mapState({
      mealType: state => state.meal.mealType
    })
  },

  watch: {
    $route (t) {
      if (t.name === 'meal-change') this.refresh()
    }
  },

  methods: {
    async checkDetail (item) {
      const { $axios, $get, records } = this
      const { id } = item
      this.$toggleSending(1)
      const list = await $axios.post('api/mealChange/query', { msgId: id, pageNum: -1 }).then(res => $get(res, 'data.data.dataList', [])).catch(e => [])
      records.splice(0, records.length, ...list)
      this.detailInfo = item
      this.$toggleSending()
      this.showDetail = true
    },

    onChange (date, dateString) {
      this.queryParam.minScheduleDate = dateString[0]
      this.queryParam.maxScheduleDate = dateString[1]
    },

    handlePage (p) {
      this.$handlePage(p)
    },

    refresh () {
      this.$refs.changeTable.refresh()
    },

    reset () {
      const queryParam = this.queryParam
      for (const key in queryParam) {
        switch (key) {
          case 'pageNum':
            queryParam[key] = 1
            break
          case 'pageSize':
            queryParam[key] = 10
            break
          default:
            queryParam[key] = ''
        }
      }
      this.rangeDate.splice(0)
      this.$refs.changeTable.refresh()
    }
  }
}
</script>

<style lang="less" scoped>
.s-table {
  /deep/ .ant-table-tbody {
    .ant-table-row {
      td {
        word-break: break-all;
      }
    }
  }
}

.detail-modal {
  .ant-modal-body {
    .item {
      margin-bottom: 20px;

      span {
        margin-left: 10px;
      }
    }
  }
}
</style>
